<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-date"></i>个人信息设置</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
    
     <el-form label-width="80px">
      
    <el-form-item label="用户名:">
    <el-input v-model="unewdata.name" auto-complete="off"  placeholder="请输入用户名" class="handle-input"></el-input>
    </el-form-item>
    <el-form-item label="头像:">
   <el-upload class="avatar-uploader" name='image' :action="uploadURI"  :show-file-list="false" :on-success="handleAvatarSuccess">
   <img v-if="unewdata.showavatar" :src="unewdata.showavatar" class="avatar">
    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
  </el-upload>
<el-dialog :visible.sync="dialogVisible" size="tiny">
  <img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
    </el-form-item>
     <el-form-item label="新密码:">
      <el-input v-model="unewdata.pwd" auto-complete="off"  type="password" placeholder="请输入新密码(不更改无需输入)" class="handle-input"></el-input>
    </el-form-item>
    <el-form-item label="密码确认:">
      <el-input v-model="unewdata.repwd" auto-complete="off"   type="password"  placeholder="请再次输入新密码(不更改无需输入)"  class="handle-input"></el-input>
    </el-form-item>

  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button  type="danger" @click="updateMinfo">保存</el-button>
  </div>


    </div>
</template>

<script>
import * as Login from "../../service/login";
import * as rpConfig from "../../../rpConfig/constant";
import { HttpReq } from "../../service/server";
var Server = new HttpReq();
export default {
  data: () => ({
    uploadURI: rpConfig.API_URI + "/Helpapi/uploadImg",
    dialogImageUrl: "",
    dialogVisible: false,
    unewdata: {
      mid: 0,
      name: "",
      pwd: "",
      repwd: "",
      remark: "",
      auth: [],
      avatar: "",
      showavatar: ""
    }
  }),
  methods: {
    initUInfo() {
      let userinfo = Login.getLogin();
      this.unewdata.mid = userinfo.m_id;
      this.unewdata.name = userinfo.m_name;
      this.unewdata.showavatar = userinfo.m_avatar;
    },

    handleAvatarSuccess(res) {
      //console.log("success");
      if (res.code != 200) {
        this.$message.error(res.msg);
      } else {
        this.unewdata.showavatar = res.data.url;
        this.unewdata.avatar = res.data.saveUrl;
      }
    },
    updateMinfo() {
      let self = this;
      Server._POST(
        rpConfig.API_URI + "/Index/updateAccount",
        self.unewdata,
        function(data) {
          self.$message.success(data.msg);
          setTimeout(() => {
            Login.clearLogin();
            self.$router.push("/login");
          }, 2000);
        }
      );
    }
  },
  mounted() {
    this.initUInfo();
  }
};
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9c2;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

</style>


